<template>
	<div class="main-router-view">
		<el-table :data="userList">
			<el-table-column prop="headicon" label="头像">
				<div slot-scope="scope" style="width: 70px;height:70px; display: flex; align-items: center;">
					<el-avatar :src="$mConfig.formatFileUrl(scope.row.headicon)" :size="60"
						style="border: #eee solid 1px;">
						<img src="../assets/logo_min.png" />
					</el-avatar>
				</div>
			</el-table-column>
			<el-table-column prop="username" label="用户名"></el-table-column>
			<el-table-column prop="nickname" label="昵称"></el-table-column>
			<el-table-column prop="address" label="地区"></el-table-column>
			<el-table-column fixed="right" label="操作" width="100">
				<template slot-scope="scope">
					<el-button type="danger" size="small" @click="remove(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				userList: []
			}
		},
		methods: {
			async fetch() {
				const res = await this.http.get("admin/users/list");
				this.userList = res.data.list;
			},
			async remove(row) {
				this.$confirm(`是否删除该用户${row.username} ?`, "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(async () => {
						const res = await this.http.post(`admin/users/list/${row._id}`)
						this.$message({
							type: "success",
							message: "删除成功!"
						});
						this.fetch();
					})
					.catch(() => {
						this.$message({
							type: "info",
							message: "已取消删除"
						});
					});
			}
		},
		mounted() {
			this.fetch();
		}
	}
</script>

<style>
</style>
